<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			canvas {
				/* background-color: #f8f8f8; */
			}

			#app {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 190;
				right: 0;
				height: 800px;
			}

			input {
				width: 200px;
				height: 50px;
				font-size: 40px;
			}

			label {
				font-size: 40px;
				padding: 10px;
			}

			.input-group {
				display: flex;
				align-items: center;
				padding: 10px;
			}
		</style>
		<script type="text/javascript" src="./js/vue.min.js"></script>
	</head>
	<body>
		<div class="img">
			<img src="./img/鸿蒙OSpng.png" style="width: 100%;"/>
		</div>
		<div id="app">
			<div class="input-group">
				<label>HTML：</label>
				<input type="number" v-model="html" max="100"></input>
			</div>
			<div class="input-group">
				<label>CSS：</label>
				<input type="number" v-model="css" max="100"></input>
			</div>
			<div class="input-group">
				<label>JavaScript：</label>
				<input type="number" v-model="js" max="100"></input>
			</div>
			<div class="input-group">
				<label>Node：</label>
				<input type="number" v-model="node" max="100"></input>
			</div>
			<div class="input-group">
				<label>Vue：</label>
				<input type="number" v-model="vue" max="100"></input>
			</div>
		</div>
		<!-- 画布 -->
		<script type="text/javascript">
			var mW = 800;
			var mH = 800;
			var html = 77;
			var css = 72;
			var js = 46;
			var node = 50;
			var vue = 80;
			var mData = [
				['HTML：' + html, 77],
				['CSS：' + css, 72],
				['JavaScript：' + js, 46],
				['Node.js：' + node, 50],
				['Vue.js：' + vue, 80]
			];
			var mCount = mData.length; //边数
			var mCenter = mW / 2; //中心点
			var mRadius = mCenter - 150; //半径(减去的值用于给绘制的文本留空间)
			var mAngle = Math.PI * 2 / mCount; //角度
			var mCtx = null;
			var mColorPolygon = '#B8B8B8'; //多边形颜色
			var mColorLines = '#B8B8B8'; //顶点连线颜色
			var mColorText = '#000000';
			var canvas = document.createElement('canvas');
			document.body.appendChild(canvas);
			//初始化
			function init() {
				canvas.height = mH;
				canvas.width = mW;
				mCtx = canvas.getContext('2d');
				drawPolygon(mCtx);
				drawLines(mCtx);
				drawRegion(mCtx);
				drawText(mCtx);
				drawCircle(mCtx);
				drawLines1(mCtx)
			}
			init()
			// 绘制多边形边
			function drawPolygon(ctx) {
				ctx.save();
				ctx.strokeStyle = mColorPolygon;
				var r = mRadius / mCount; //单位半径
				// var r = mRadius/ (mCount-2); //单位半径  画三个五边形
				//画5个圈
				for (var i = 0; i < mCount; i++) {
					// for(var i = 0; i < mCount-2; i ++){ // 画三个五边形
					ctx.beginPath();
					var currR = r * (i + 1); //当前半径
					//画5条边
					for (var j = 0; j < mCount; j++) {
						var x = mCenter + currR * Math.cos(mAngle * j);
						var y = mCenter + currR * Math.sin(mAngle * j);
						ctx.lineTo(x, y);
					}
					ctx.closePath()
					ctx.stroke();
				}
				ctx.restore();
			}

			//顶点连线
			function drawLines(ctx) {
				ctx.save();

				ctx.beginPath();
				ctx.strokeStyle = mColorLines;

				for (var i = 0; i < mCount; i++) {
					var x = mCenter + mRadius * Math.cos(mAngle * i);
					var y = mCenter + mRadius * Math.sin(mAngle * i);

					ctx.moveTo(mCenter, mCenter);
					ctx.lineTo(x, y);
				}

				ctx.stroke();

				ctx.restore();
			}

			//数据点之间的连线
			function drawLines1(ctx) {
				ctx.save();
				ctx.beginPath();
				var count = 0;
				for (var i = 0; i < mCount; i++) {
					var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
					var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;
					count = i + 1;
					if (count < mCount) {
						var x1 = mCenter + mRadius * Math.cos(mAngle * (i + 1)) * mData[i + 1][1] / 100;
						var y1 = mCenter + mRadius * Math.sin(mAngle * (i + 1)) * mData[i + 1][1] / 100;
					} else {
						var x1 = mCenter + mRadius * Math.cos(mAngle * 0) * mData[0][1] / 100;
						var y1 = mCenter + mRadius * Math.sin(mAngle * 0) * mData[0][1] / 100;
					}
					ctx.moveTo(x, y);
					ctx.lineTo(x1, y1);
					ctx.lineWidth = 2; //设置线宽状态
					ctx.strokeStyle = '#00FFFF'; //设置线的颜色状态
				}
				ctx.stroke();

				ctx.restore();
			}
			//绘制文本
			function drawText(ctx) {
				ctx.save();

				var fontSize = mCenter / 12;
				ctx.font = fontSize - 10 + 'px Microsoft Yahei';
				ctx.fillStyle = mColorText;

				for (var i = 0; i < mCount; i++) {
					var x = mCenter + mRadius * Math.cos(mAngle * i);
					var y = mCenter + mRadius * Math.sin(mAngle * i);

					if (mAngle * i >= 0 && mAngle * i <= Math.PI / 2) {
						ctx.fillText(mData[i][0], x, y + fontSize);
					} else if (mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI) {
						ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize);
					} else if (mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2) {
						ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
					} else {
						ctx.fillText(mData[i][0], x, y);
					}

				}
				//中心绘制文字
				ctx.font = "bold 26px Arial"
				ctx.fillStyle = '#0040FF'
				ctx.fillText("", mCenter - 18, mCenter + 16);
				ctx.restore();
			}

			//绘制数据区域
			function drawRegion(ctx) {
				ctx.save();

				ctx.beginPath();
				for (var i = 0; i < mCount; i++) {
					var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
					var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

					ctx.lineTo(x, y);
				}
				ctx.closePath();
				ctx.fillStyle = '#00FFFF20';
				ctx.fill();

				ctx.restore();
			}

			//画点
			function drawCircle(ctx) {
				ctx.save();

				var r = mCenter / 50;
				for (var i = 0; i < mCount; i++) {
					var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
					var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

					ctx.beginPath();
					ctx.arc(x, y, r, 0, Math.PI * 2);
					ctx.fillStyle = 'rgba(0, 250, 250, 0.8)';
					ctx.fill();
				}

				ctx.restore();
			}
		</script>
		<!-- Vue.js 模板渲染 -->
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					html: 77,
					css: 72,
					js: 46,
					node: 50,
					vue: 80
				},
				watch: {
					'html': function(newVal, oldVal) {
						console.log(oldVal, newVal)
						html = newVal
						mData[0][1] = newVal
						mData[0][0] = "HTML：" + html
						init()
					},
					'css': function(newVal, oldVal) {
						console.log(oldVal, newVal)
						css = newVal
						mData[1][1] = newVal
						mData[1][0] = "CSS：" + css
						init()
					},
					'js': function(newVal, oldVal) {
						console.log(oldVal, newVal)
						js = newVal
						mData[2][1] = newVal
						mData[2][0] = "JavaScript：" + js
						init()
					},
					'node': function(newVal, oldVal) {
						console.log(oldVal, newVal)
						node = newVal
						mData[3][1] = newVal
						mData[3][0] = "Node.js：" + node
						init()
					},
					'vue': function(newVal, oldVal) {
						console.log(oldVal, newVal)
						vue = newVal
						mData[4][1] = newVal
						mData[4][0] = "Vue.js：" + vue
						init()
					}
				}
			})
		</script>
	</body>
</html>
